<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe63e;</i>
        <span>{{ $t("system.register") }}</span>
      </h2>
    </template>
    <template v-slot:global-button>
      <el-button class="kylin-button">
        {{ $t("system.password_template_download") }}
      </el-button>
      <el-button class="kylin-button">
        {{ $t("system.certificate_template_download") }}
      </el-button>
      <el-button class="kylin-button" @click="open">
        {{ $t("system.get_activation_code") }}
      </el-button>
    </template>
    <template v-slot:search>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="register-upload">
            <p class="register_title">
              {{ $t("system.system_template_import_detail") }}
            </p>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :limit="1"
              :file-list="fileList"
              :on-success="handleSuccess"
              :on-error="handleError"
            >
              <el-button size="small" class="kylin-button">{{
                $t("upload_file")
              }}</el-button>
              <div slot="tip" class="el-upload__tip">
                {{ $t("only_upload_excel") }}
              </div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-table
              border
              :data="tableData"
              stripe
              size="medium"
              style="width: 100%"
              :header-cell-style="{ color: 'black' }"
              :cell-style="{ color: 'black' }"
            >
              <el-table-column :label="$t('success')">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleClick('success')"
                    type="text"
                    size="medium"
                  >
                    {{ scope.row.success }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column :label="$t('failed')">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleClick('failed')"
                    type="text"
                    size="medium"
                  >
                    {{ scope.row.failed }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column :label="$t('pending')">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleClick('pending')"
                    type="text"
                    size="medium"
                  >
                    {{ scope.row.pending }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column :label="$t('cancelled')">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleClick('cancelled')"
                    type="text"
                    size="medium"
                  >
                    {{ scope.row.cancel }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-slot:content>
      <p class="system-table-description">{{$t("system.system_register_description")}}</p>
      <ky-table
        ref="table"
        :search_data="search_data"
        :getData="getAgentList"
      >
        <template v-slot:table-action>
          <el-button
            class="kylin-item-button"
            >{{ $t("cancel") }}
            </el-button>
        </template>
        <template v-slot:table>
          <el-table-column prop="ip" :label="$t('system.ip_address')">
          </el-table-column>
          <el-table-column prop="result" :label="$t('result')">
          </el-table-column>
          <el-table-column
            prop="createdAt"
            :label="$t('register_time')"
          >
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getAgentList } from "@/api/system";
export default {
  components: {
    Page,
    kyTable,
  },
  data() {
    return {
      fileList: [],
      tableData: [
        {
          success: 1,
          failed: 1,
          pending: 0,
          cancel: 0,
        },
      ],
      token: "ssss",
      search_data: {
          ip: {
              name: "system.ip_address",
              type: "text"
          },
          result: {
              name: "result",
              type: "select",
              items: [
                  {key: "success", name: this.$t("success")},
                  {key: "failed", name: this.$t("failed")},
                  {key: "pending", name: this.$t("pending")},
                  {key: "cancelled", name: this.$t("cancelled")}
              ]
          },
          createdAt: {
              name: "register_time",
              type: "date"
          }
      }
    };
  },
  methods: {
    getAgentList,
    open(){
        this.$alert(`
        <div>
            <p>
            <label>注意：</label>
            <span>激活码的有效期为5个小时</span>
            </p>
            <p>
            <label>激活码：</label>
            <span id="register_code">${this.token}</span>
            </p>
        </div>
        `, this.$t("system.get_activation_code"), {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '复制',
          cancelButtonText: '取消',
        }).then(() => {
          let target = document.querySelector('#register_code');
          let range = document.createRange();
          range.selectNode(target);
          window.getSelection().removeAllRanges();
          window.getSelection().addRange(range);
          document.execCommand('copy');
          window.getSelection().removeAllRanges();
          this.$message({
            type: 'success',
            message: '成功复制激活码'
          });
        });
    },
    handleSuccess() {
      this.fileList = [];
      this.$message({
        type: "success",
        message: this.$t("file_uploaded_successfully"),
      });
    },
    handleError(){
      this.fileList = [];
      this.$message({
        type: "error",
        message: this.$t("file_uploaded_error"),
      });
    },
    handleClick(type) {
      this.$router.push({
        name: "log_detail",
        params: { id: 1 },
        query: {
          search: `result ~ "${type}"`,
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.register_title {
  margin-bottom: 10px;
}
.register-upload {
    height: 120px;
}
</style>